<template>
	<div>
		<el-drawer title :visible.sync="drawer" :direction="direction" :before-close="handleClose" custom-class="drawer-info">
			<div class="info-item">
				<h5 class="from-title">基本信息</h5>
        <div class="form-item">
          <label class="form-item-label">调用人:</label>
          <div class="form-item-content">{{ objInfo.invokeUserName }}</div>
        </div>
        <div class="form-item">
          <label class="form-item-label">调用时间:</label>
          <div class="form-item-content">{{ objInfo.invokeTime }}</div>
        </div>
				<div class="form-item">
					<label class="form-item-label">调用路径:</label>
					<div class="form-item-content">{{ objInfo.invokeUrl }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">执行类:</label>
					<div class="form-item-content">{{ objInfo.className }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">执行方法:</label>
					<div class="form-item-content">{{ objInfo.methodName }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">调用参数:</label>
					<div class="form-item-content">
						<code>
							<fortress-copy class="fortress-copy" title="点击复制" :copy-data="objInfo.invokeParams"></fortress-copy>
							<pre>{{ objInfo.invokeParams }}</pre>
						</code>
					</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">响应结果:</label>
					<div class="form-item-content">
						<code>
							<fortress-copy class="fortress-copy" title="点击复制" :copy-data="objInfo.resultData"></fortress-copy>
							<pre>{{ objInfo.resultData }}</pre>
						</code>
					</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">调用状态:</label>
					<div class="form-item-content">
						<el-tag :type="objInfo.invokeStatus == '00' ? 'success' : 'danger'">
							{{ objInfo.invokeStatus == "00" ? "生效" : "异常" }}
						</el-tag>
					</div>
				</div>

				<div class="form-item">
					<label class="form-item-label">耗时(毫秒):</label>
					<div class="form-item-content">{{ objInfo.elapsedTime }}</div>
				</div>
<!--				<div class="form-item">-->
<!--					<label class="form-item-label">创建时间:</label>-->
<!--					<div class="form-item-content">{{ objInfo.createTime }}</div>-->
<!--				</div>-->
			</div>
		</el-drawer>
	</div>
</template>
<script>
import { logoperationInfo } from "@/api/log/logoperation.js"

export default {
	data() {
		return {
			drawer: true,
			direction: "rtl",
			objInfo: {},
		}
	},
	created() {},
	methods: {
		init(id) {
			if (id) {
				logoperationInfo(id).then(res => {
					this.objInfo = res.data
				})
			}
			this.drawer = true
		},
		// 关闭抽屉
		handleClose(done) {
			done()
		},
	},
}
</script>
<style lang="scss" scoped>
code {
	position: relative;
	.fortress-copy {
		position: absolute;
		z-index: 5;
		top: 5px;
		right: 5px;
		opacity: 0;
	}
	&:hover {
		.fortress-copy {
			opacity: 1;
		}
	}
}
pre {
	background: #f5f5f5;
	padding: 15px 10px;
	color: #00a841;
	border: 1px solid #ccc;
	word-wrap: break-word;
	word-break: break-all;
	white-space: pre-wrap;
}
.from-title {
	margin-bottom: 20px;
	padding: 0 20px 20px 20px;
	font-size: 16px;
	color: #17233d;
	border-bottom: 1px solid #eee;
}
.info-item {
	margin-bottom: 40px;
}

.form-item {
	margin-bottom: 20px;
	font-size: 14px;
}
.form-item-label {
	text-align: right;
	float: left;
	width: 25%;
}
.form-item-content {
	margin-left: 30%;
	width: 70%;
}
</style>
